<template>
  <div class="leadpage" :style="{'margin-left':num+'rem'}">
      <div class="item">
        <Swiperitem :textflag='flag1'></Swiperitem>
      </div>
      <div class="item">
        <Swiperitem :textflag='flag2'></Swiperitem>
      </div>
      <div class="item">
        <Swiperitem :textflag='flag3'></Swiperitem>
      </div>
      <div class="dian">
          <ul>
              <li></li>
              <li></li>
              <li></li>
          </ul>
      </div>
  </div>
</template>
<script>
import Swiperitem from "../components/swiperitem"
export default {
  name:'leadpage',
  data(){
    return {
        num:0,
        flag1:true,
        flag2:false,
        flag3:false,
        index:1
    }
  },
  created(){
      let that = this;
    let timer = setInterval(function() {
        if(that.index==1){
            that.num -=10;
            that.flag2=true;
            that.index++
        }else if(that.index==2){
            that.num -=10;
            that.flag3=true; 
            that.index++
        }else if (that.index==3){
            clearInterval(timer);
            that.$router.push('/login');
        }
    }, 1200);
  },
  components:{
    Swiperitem
  },
  methods:{
  }
}
</script>
<style lang="less" scoped>
@w:75rem;
    .leadpage {
        transition: margin-left .4s ease;
        background: #f97496;
        height: 100%;
        width: 3500/@w;
        position: fixed;
        .item {
            float: left;
            width: 750/@w;
        }
        .dian {
            position: fixed;
            bottom: 190/@w;
            left:300/@w;

            ul {
                li{
                    width: 17/@w;
                    height: 17/@w;
                    background: #fff;
                    border-radius: 50%;
                    list-style: none;
                    float: left;
                    margin-right: 20/@w;
                }
            }
        }
    }
</style>

